<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
	<title>播放器范本</title>
	<link rel="stylesheet" type="text/css" href="css/style2.css">
	<style type="text/css">
		.J-video{background:#000;}
	</style>
</head>
<body>
<div class="section">
	<h2>以下为播放器示例：</h2>
	<div class="video" data-title="松霖家居家装品质节" data-url="https://pic.solux.cn/Mobile/00_2018/tuipinzhi/video.mp4">
		<a href="javascript:void(0);" class="J-play"></a>
	</div>
</div>

<!--弹窗-->
<div class="dialog-videoBg"></div>
<div class="dialog-video">
    <div class="close">×</div>
    <div class="J-video"></div>
</div>

<script type="text/javascript" src='js/jquery.min.js'></script>
<script type="text/javascript" src="js/soluxPlayer.min.js"></script>
<script type="text/javascript">
$(function(){
	// 视频
    $(".close").on('click',function(){
        $(".dialog-video").animate({
            "margin-top": "-1000px"
        },300,function(){
        		$('.dialog-videoBg').hide();
            }
        );
    });

    $('.video').on('click',function(){
    	var that = $(this);
    	$('.dialog-videoBg').fadeIn();
    	var player = $('.dialog-video').find('.J-video').empty().soluxPlayer({
            title: that.attr('data-title'),
            poster: "",
            showTitle: true,
            autoPlay: false,
            videos: [that.attr('data-url')],
            onStart: function() {},
            onPause: function() {}
        });
        $(".dialog-video").show().animate({
                "margin-top": "-250px"
            },300, function() {
                player.startPlay();
            }
        );
    });

})
</script>
</body>
</html>